<template>
  <div style="display: relative">
    <ListTitle list-title="运行参数管理"></ListTitle>
    <button @click="closeDialog" class="botton-shut-icon-yy-information"></button>

    <div class="dialog-container-yy-information">
      <div class="bottom-section-yy-information">
        <div style="display: flex; gap: 10px; margin-right: 1.5rem;">
          <!-- 空域对象 -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              空域对象
            </label>
            <div class="info-box-yy-information">
              <span class="info-box-text-yy-information">{{ selectedObjectName }}</span>
            </div>
          </div>

          <!-- 日期 -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information " style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              日期
            </label>
            <el-date-picker v-model="selectedDate" value-format="yyyy-MM-dd" placeholder="选择日期"
              class="el-date-picker-custom">
            </el-date-picker>
          </div>
        </div>

        <div style="display: flex; gap: 10px; margin-right: 1.5rem; margin-top: 0.5rem;">
          <!-- 时间（下拉框） -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              时间
            </label>
            <el-time-picker v-model="selectedTime" placeholder="选择时间" class="info-box-yy-information custom-picker"
              clearable>
            </el-time-picker>
          </div>

          <!-- 状态（下拉框） -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              状态
            </label>
            <el-select v-model="selectedStatus" placeholder="选择状态" class="info-box-yy-information custom-picker">
              <el-option label="全部状态" value="全部状态"></el-option>
              <el-option label="开启" value="开启"></el-option>
              <el-option label="关闭" value="关闭"></el-option>
            </el-select>
          </div>
        </div>

        <div style="display: flex; gap: 10px; margin-right: 1.5rem; margin-top: 0.5rem;">
          <!-- 运行状态-容量占用率 -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              运行状态
            </label>
            <div class="info-box-yy-information">
              <span class="info-box-text-yy-information">容量占用率：20%</span>
            </div>
          </div>

          <!-- 占位 -->
          <div style="flex: 1; display: flex; align-items: center;">
            <label class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1); margin-right: 5%;">
              
            </label>
          </div>
        </div>

        <div class="body-container">
          <div class="regional_table table1">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="index" label="#" width="50" align="center">
                <template #default="scope">
                  <span>{{ scope.row.index }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="startTime" label="开始时段" width="85" align="center">
                <template #default="scope">
                  <span>{{ scope.row.startTimeDis }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="endTime" label="结束时段" width="85" align="center">
                <template #default="scope">
                  <span>{{ scope.row.endTimeDis }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="status" label="状态" align="center">
                <template #default="scope">
                  <span>{{ scope.row.status }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="capacity" label="容量系数" width="68" align="center">
                <template #default="scope">
                  <span>{{ scope.row.capacity }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="interval" label="间隔系数" width="68" align="center">
                <template #default="scope">
                  <span>{{ scope.row.interval }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="130" align="center">
                <template #default="scope">
                  <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
                  <!-- 添加分隔符 -->
                  <span style="margin: 0 8px;"> </span>
                  <!-- 触发删除的按钮 -->
                  <el-popconfirm title="你确定要删除这个记录吗?" confirmButtonText="确定" cancelButtonText="取消"
                    @confirm="deleteRow(scope.row)">
                    <el-button slot="reference" type="text">删除</el-button>
                  </el-popconfirm>
                  <!-- <el-button type="text" @click="deleteRow(scope.row)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <!-- + 按钮 -->
        <div class="outer-container">
          <div class="inner-container">
            <img src="../assets/img/module6/add.png" class="add" @click="handleClickAdd">
          </div>
        </div>

        <!-- <CustomDialogConfirm :visible.sync="cofirmReleaseDialogVisible" :title="selectedDetails.programName"
          :users="userList" :proid="selectedDetails.id" @refreshHistory="refreshHistory"> </CustomDialogConfirm> -->
        <!-- <CustomDialogConfirm :visible.sync="cofirmReleaseDialogVisible" :title="'运行管理信息'"
          :selectedObject="selectedDetails.object" :selectedStatus="selectedDetails.status"
          :selectedStartTime="selectedDetails.startTime" :selectedEndTime="selectedDetails.endTime"
          :capacityFactor="selectedDetails.capacity" :intervalFactor="selectedDetails.interval"
          @refreshHistory="refreshHistory">
        </CustomDialogConfirm> -->
        <CustomDialogConfirm :visible.sync="cofirmReleaseDialogVisible" :title="'运行管理信息'"
          :selectedObject="selectedDetails.object" :selectedStatus="selectedDetails.status"
          :selectedStartTime="selectedDetails.startTime" :selectedEndTime="selectedDetails.endTime"
          :capacityFactor="selectedDetails.capacity" :intervalFactor="selectedDetails.interval"
          :operationId="isEdit ? selectedDetails.operationId : null" :objectId="selectedDetails.objectId"
          @refreshHistory="refreshHistory" />

      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
import ListTitle from "../components/ListTitle";
import CustomDialogConfirm from '@/components/CustomDialogModule6Confirm.vue';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE6;

export default {
  name: "CustomDialogModule6",
  components: {
    ListTitle,
    CustomDialogConfirm
  },
  data() {
    return {
      isEditing: false,
      tempSelectedDetails: {},
      selectedDetails: {
        object: '',
        status: '',
        startTime: '',
        endTime: '',
        capacity: '',
        interval: '',
        operationId: null,
        objectId: null
      },
      tableData: [
        // { index: 1, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '2', interval: '2' },
        // { index: 2, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '2', interval: '2' },
        // { index: 3, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '2', interval: '2' },
        // { index: 4, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '1', interval: '1' },
        // { index: 5, startTime: '14:55:00', endTime: '15:55:00', status: '关闭', capacity: '-', interval: '-' },
        // { index: 6, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '1', interval: '1' },
        // { index: 7, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '2', interval: '2' },
        // { index: 8, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '1', interval: '1' },
        // { index: 9, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '1', interval: '1' },
        // { index: 10, startTime: '14:55:00', endTime: '15:55:00', status: '开启', capacity: '1', interval: '1' }
      ],
      userList: [],
      cofirmReleaseDialogVisible: false,
      selectedDate: this.getCurrentDate(), // 初始化为当前日期
      selectedTime: null, // 初始化为当前时间的 Date 对象
      selectedStatus: '全部状态',    // 初始化为字符串
      isEdit: false  // 用于判断是否是编辑状态
    };
  },
  props: {
    selectedObjectName: {
      required: true,
    },
    selectedObjectId: {
      required: true,
    },
    statusDialogVisible: {
      type: Boolean,
      required: true,
    }
  },
  watch: {
    async selectedObjectName(newVal, oldVal) {
      console.log('selectedObjectName 变化了:', oldVal, '=>', newVal);
      // 你可以在这里处理值变化时的逻辑
      this.resetSelectedDetails();
      // 调用封装好的方法来更新表格
      await this.fetchHistoricalRecords();
    },
    // 监听日期变化
    selectedDate(newVal) {
      console.log("日期变化:", newVal);
      this.fetchHistoricalRecords(); // 调用函数获取数据
    },
    // 监听时间变化
    selectedTime(newVal) {
      console.log("时间变化:", newVal);
      this.fetchHistoricalRecords(); // 调用函数获取数据
    },
    // 监听状态变化
    selectedStatus(newVal) {
      console.log("状态变化:", newVal);
      this.fetchHistoricalRecords(); // 调用函数获取数据
    },
    cofirmReleaseDialogVisible(newVal, oldVal) {
    // 当从 true 变为 false 时，说明弹窗刚关闭，刚刚作了修改
    if (oldVal === true && newVal === false) {
      this.refreshHistory();
    }
  }
  },
  methods: {
    getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getCurrentDateTimeObject() {
      return new Date(); // 返回当前时间的 Date 对象
    },
    formatTime(time) {
      // 确保时间为 "HH:mm:ss" 格式
      const hours = String(time.getHours()).padStart(2, '0');
      const minutes = String(time.getMinutes()).padStart(2, '0');
      const seconds = String(time.getSeconds()).padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1，并确保两位
      const day = date.getDate().toString().padStart(2, '0'); // 确保天数是两位
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    },
    resetSelectedDetails() {
      this.selectedDetails = {
      };
      this.isEditing = false;
      this.tempSelectedDetails = {};
    },
    async fetchHistoricalRecords() {
      try {
        // 打印传递给后端的参数 
        console.log("某个对象传给后端查询的参数:", {
          id: this.selectedObjectId,
          airspaceObjectName: this.selectedObjectName,
          date: this.selectedDate, // 只传递日期
          ...(this.selectedTime ? { dateTime: this.selectedDate + "T" + this.formatTime(this.selectedTime) } : {}), // 如果选择了时间，则添加 dateTime 字段
          airspaceObjectState: this.selectedStatus === "全部状态" ? null : this.selectedStatus // 如果状态为“全部状态”，发送null
        });

        // 查询记录操作
        const response = await axios.post(`${baseApi}/manage/searchrecordwithcondition`, {
          id: this.selectedObjectId,
          airspaceObjectName: this.selectedObjectName,
          date: this.selectedDate,
          ...(this.selectedTime ? { dateTime: this.selectedDate + "T" + this.formatTime(this.selectedTime) } : {}), // 如果选择了时间，则添加 dateTime 字段
          airspaceObjectState: this.selectedStatus === "全部状态" ? null : this.selectedStatus
        });


        console.log("response", response);
        if (response.data.code === 0) {
          const startOfToday = new Date(this.selectedDate);
          startOfToday.setHours(0, 0, 0, 0);

          const endOfToday = new Date(this.selectedDate);
          endOfToday.setHours(23, 59, 59, 999);
          // 替换表格数据
          // this.tableData = response.data.data.map((item, index) => ({
          //   index: index + 1,
          //   // startTime: new Date(item.startTime).toLocaleString(),
          //   // endTime: new Date(item.endTime).toLocaleString(),
          //   startTime: this.formatDate(new Date(item.startTime)),
          //   endTime: this.formatDate(new Date(item.endTime)),
          //   // startTime: new Date(item.startTime).toLocaleTimeString('zh-CN', { hour12: false }),
          //   // endTime: new Date(item.endTime).toLocaleTimeString('zh-CN', { hour12: false }),
          //   status: item.startStopState,
          //   capacity: item.capacityThreshold || '-',
          //   interval: item.safeIntervalThreshold || '-',
          //   operationId: item.operationId,  // 从返回值中获取 operationId
          //   objectId: item.objectId         // 从返回值中获取 objectId
          // }));
          // 替换表格数据
          this.tableData = response.data.data.map((item, index) => {
            const itemStartTime = new Date(item.startTime);
            const itemEndTime = new Date(item.endTime);

            const startTimeDis =
              itemStartTime < startOfToday ? "00:00:00" : this.formatTime(itemStartTime);
            const endTimeDis =
              itemEndTime > endOfToday ? "23:59:59" : this.formatTime(itemEndTime);

            return {
              index: index + 1,
              startTime: this.formatDate(itemStartTime),
              endTime: this.formatDate(itemEndTime),
              startTimeDis,
              endTimeDis,
              status: item.startStopState,
              capacity: item.capacityThreshold || '-',
              interval: item.safeIntervalThreshold || '-',
              operationId: item.operationId,
              objectId: item.objectId
            };
          });
          console.log("后端返回数据处理后的tableData", this.tableData)
        } else {
          console.error("查询失败:", response.data.message);
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    },
    closeDialog() {
      this.resetSelectedDetails();
      this.$emit("update:statusDialogVisible", false); // 通知父组件关闭弹窗
    },
    editRow(row) {
      this.isEdit = true;  // 设置为编辑状态
      console.log("Editing row:", row);
      this.selectedDetails = {
        object: this.selectedObjectName,
        status: row.status,
        startTime: row.startTime,
        endTime: row.endTime,
        capacity: row.capacity,
        interval: row.interval,
        operationId: row.operationId,  // 从row中获取 operationId
        objectId: row.objectId         // 从row中获取 objectId
      };
      console.log("编辑的那一行点击后的selectedDetails", this.selectedDetails);
      this.cofirmReleaseDialogVisible = true;
    },
    async deleteRow(row) {
      console.log("Deleting row:", row);
      try {
        // 执行删除操作（例如调用 API）
        const response = await axios.post(`${baseApi}/manage/delete`, {
          operationId: row.operationId,
          objectId: this.selectedObjectId,
          airspaceObjectName: this.selectedObjectName,
        });

        if (response.data.code === 0) {
          // 删除成功，重新加载数据
          await this.fetchHistoricalRecords();
        } else {
          console.error("删除失败:", response.data.message);
          this.$message.error("删除失败：" + response.data.message);
        }
      } catch (error) {
        console.error("请求失败:", error);
        this.$message.error("请求失败，请稍后重试");
      }
    },
    refreshHistory() {
      this.fetchHistoricalRecords();
    },
    handleClickAdd() {
      this.isEdit = false;  // 新增状态
      this.selectedDetails = {
        object: this.selectedObjectName,
        status: '',
        startTime: '',
        endTime: '',
        capacity: '',
        interval: '',
        objectId: this.selectedObjectId
      };
      this.cofirmReleaseDialogVisible = true;
    }
  },
  // 组件加载的时候同步selectedDetails到tempSelectedDetails
  mounted() {
    this.tempSelectedDetails = JSON.parse(JSON.stringify(this.selectedDetails));
    console.log("mount selectDetails: ", this.selectedDetails);
    console.log("mount tempSelectDetails: ", this.tempSelectedDetails);
    console.log('父组件传进来的selectedObjectName:', this.selectedObjectName);
    console.log('父组件传进来的selectedObjectId:', this.selectedObjectId);
    console.log('父组件传进来的statusDialogVisible:', this.statusDialogVisible);

    // 组件加载完成后调用 fetchHistoricalRecords，获取后端数据
    this.fetchHistoricalRecords();
  },
};
</script>


<style scoped>
.botton-shut-icon-yy-information {
  background-image: url("../assets/img/nav/关闭.png");
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  right: 30px;
  top: 0;
  width: 25px;
  height: 25px;
  z-index: 3;
  border: none;
  cursor: pointer;
  left: 90%;
  top: 2.7%;
}

.dialog-title-yy-information {
  width: 90%;
  position: inherit;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}

.dialog-title-text-yy-information {
  position: absolute;
  left: 13%;
  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dialog-container-yy-information {
  /* background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%; */
  background-color: rgba(255, 255, 255, 0.041);
  /* 使用透明度叠加 */
  padding: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  top: 10%;
  left: 0%;
  padding: 0px;
  flex-grow: 1;
}

.top-section-yy-information {
  /* z-index: 10; */
  /* position:absolute; */
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
  /* display: block; */
  /* background-color:white; */
}

.progress-labels-yy-information {
  position: absolute;
  color: white;
  top: 7%;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
}

.bottom-section-yy-information {
  position: inherit;
  display: inline;
  left: 0%;
  top: 0px;
  width: 100%;
  height: 85%;
  padding: 5% 0 0 0;

}

.select-section-yy-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color: white; */
  left: 3%;
  top: 30%;
  width: 94%;
  height: 53%;
}

.select-section-title-yy-information {
  background-image: url("../assets/img/module2/selecttitle.png");
  /* background-color: #fff; */
  background-size: 100% 100%;
  position: absolute;
  /* background-color: white; */
  left: 9%;
  top: 9%;
  width: 84%;
  height: 16%;
}

.select-section-titletext-yy-information {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 600;
}

.dropdown-container-yy-information {
  /* background-color: white; */
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}

.dropdown-yy-information {
  position: relative;
  left: 15%;
  width: 70%;
  height: 20%;
  margin-top: 5%;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: white;
  font-weight: 600;
  background-color: black;
  font-size: 20px;
}

.dropdown-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
}

.button-container {
  margin-top: 5%;
  padding: 0 10%;
  display: flex;
  justify-content: space-between;
  /* Adjust the space between buttons */
}

.submit-button-yy-information {
  background-image: url("../assets/img/module2/buttonblue.png");
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  bottom: 4%;
  height: 46px;
  width: 100px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 20px;
  text-align: center;
}

.up-content-text-yy-information {
  margin-right: 5%;
  text-align: right;
  width: 35%;
}

.info-box-yy-information {
  position: relative;
  /* background-image: url("../assets/img/module2/text.png");
  background-size: cover; */
  background-color: transparent;
  border: none;
  padding: 0px;
  width: 200px;
  min-height: 40px;
  height: 100%;
  display: flex;
  /* justify-content: center; 水平居中 */
  align-items: center;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  width: 80%;
}

.el-date-picker-custom {
  width: 200px !important;
  background-color: transparent;
  background-image: url("../assets/img/module2/text.png");
}

.el-date-picker-custom /deep/ .el-input__inner {
  background-color: transparent !important;
  color: white;
  border: none;
}

.body-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 99%;
  padding: 1vh 1vw 1vh 0;
  max-height: 250px;
}

.regional_table {
  overflow-y: auto;
  height: 70vh;
  margin-left: 1rem;
}

/* 最外层透明表格背景与白色字体 */
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: white;
}

/* 针对 el-table 隐藏滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.regional_table /deep/ .el-table__body-wrapper {
  scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;
  /* IE/Edge 隐藏滚动条 */
}

/* 表格头部和单元格的背景颜色透明 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  color: rgb(255, 255, 255);
}

/* 设置表格边框 */
.regional_table /deep/ .el-table__body-wrapper {
  border: 0.5px solid transparent;
}

/* 如果表头或其他部分需要特殊透明处理 */
.regional_table /deep/ .el-table__header-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  /* 表头轻微透明 */
}

.regional_table /deep/ .el-table .el-table__cell {
  padding: 0rem;
}


.regional_table /deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
}

.table1::-webkit-scrollbar {
  width: 0.125rem;
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 0.625rem;
}

.outer-container {
  padding: 0 2rem 0 1rem;
  width: 100%;
  height: 3rem;
}

.inner-container {
  width: 100%;
  height: 2rem;
  /* background-color: rgba(0, 16, 29, 0.5); */
  background-color: rgb(112 136 156 / 24%);
  display: flex;
  /* 添加 flex 布局 */
  align-items: center;
  /* 使内容垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
}

.add {
  width: 25px;
  height: 25px;
}

.el-button--text {
  color: #ffffff;
}

.custom-picker /deep/ .el-input__inner {
  background-color: transparent;
  color: white;
  border: none;
}

.custom-picker /deep/ .el-select .el-input__inner {
  background-color: transparent;
  color: white;
}

.custom-picker /deep/ .el-time-picker .el-input__inner {
  background-color: transparent;
  color: white;
}

/* 透明化下拉列表背景 */
.custom-picker /deep/ .el-select-dropdown__item {
  background-color: transparent;
  color: black;
}
</style>

<style lang="scss" scoped>
@import "../assets/demo/index.scss";
</style>